<html>
	<head>
		<link rel="profile" href="http://microformats.org/profile/hcard" />
		<style>
			body, table {
				font-family:arial;
				font-size: 10pt;
				line-height: 1.5em;
			}
			img {
				border: 0;
			}
			.l {
				font-variant: small-caps;
			}
			.indent {
				margin-left: 5px;
				padding-left: 5px;
				border-left: 1px solid #000;
			}
			#imagePopup {
				position: fixed;
				z-index: 999; /* prevent audio control from appearing over the div */
				left: 0px;
				top: 0px;
				height: 100%;
				width: 100%;
				cursor: pointer;
				background-image: url('');
			}
		</style>
		
		<script>
			function showImage(a){
				var imgs = a.getElementsByTagName('img');
				if (imgs.length == 0){
					return;
				}
				var img = imgs[0];
	
				var imagePopup_img = document.getElementById("imagePopup_img");
				imagePopup_img.src = img.src;
				var imagePopup = document.getElementById('imagePopup');
				imagePopup.style.display = 'block';
			}
	
			function resizeRelative(img, maxHeight, maxWidth) {
				var ratio = 0;
				var width = img.width;
				var height = img.height;
				
				if (width > maxWidth) {
					ratio = maxWidth / width;
					img.width = maxWidth;
					img.height = height * ratio;
					height = height * ratio;
					width = width * ratio;
				}
				
				if (height > maxHeight) {
					ratio = maxHeight / height;
					img.height = maxHeight;
					img.width = width * ratio;
				}
			}
		</script>
	</head>
	<body>
	
	<div id="imagePopup" onclick="this.style.display='none'" style="display:none">
		<table style="width:100%; height:100%">
			<tr>
				<td valign="middle" align="center">
					<img id="imagePopup_img" src="" />
				</td>
			</tr>
		</table>
	</div>
	
	<div class="vcard">
	
		<table>
			<tr>
				<td valign="top">
					
						<img  onload="resizeRelative(this, 100, 100)" src="" />
					
				</td>
				<td valign="top">
						<h1 class="fn">Jonathan Doe</h1>
					
						<span class="l">Nicknames: </span>
							<span class="nickname">John</span>, 
							<span class="nickname">Jonny</span>
						<br />
					
					
						<span class="l">Tags: </span>
							<span class="category">widgetphile</span>, 
							<span class="category">biker</span>, 
							<span class="category">vCard expert</span>
						<br />
				</td>
			</tr>
		</table>
		
		
		<br />
		
		
			<span class="l">Unique identifier: </span>
			<span class="uid">urn:uuid:1d0d005c-b3d4-4a13-b1a0-2143cfbea616</span>
			<br />
		
			<span class="l">vCard last updated: </span>
			<time class="rev" datetime="2022-07-27T10:32:45+0800">七月 27, 2022 10:32 上午 CST</time>
			<br />

		<table>
			<tr>
				<td valign="top">
						<span class="l">Addresses:</span>
						<div class="indent">
							<div class="adr">
									<span class="label"><span class="value" style="display:none">123 Wall St.<br />New York, NY 12345<br />USA</span>

									<i>
										<span class="type">Work</span>
									</i><br />

									</span>

									<span class="street-address">123 Wall St.</span><br />
									<span class="locality">New York</span>, 
									<span class="region">NY</span> 
									<span class="postal-code">12345</span>
									<br /><span class="country-name">USA</span>
							</div>
							<br />
							<div class="adr">
									<span class="label"><span class="value" style="display:none">123 Main St.<br />Albany, NY 54321<br />USA</span>

									<i>
										<span class="type">Home</span>
									</i><br />

									</span>

									<span class="street-address">123 Main St.</span><br />
									<span class="locality">Albany</span>, 
									<span class="region">NY</span> 
									<span class="postal-code">54321</span>
									<br /><span class="country-name">USA</span>
							</div>
							<br />
						</div>
				</td>
				<td valign="top" style="padding-left:20px">
						<span class="l">Phone numbers:</span>
						<div class="indent">
								<div class="tel">
										<i>
												<span class="type">Work</span>
										</i>: 
									<span class="value">
											1-555-555-1234
									</span>
								</div>
								<div class="tel">
										<i>
												<span class="type">Work</span>, 
												<span class="type">Cell</span>
										</i>: 
									<span class="value">
											1-555-555-5678
									</span>
								</div>
						</div>
						<br />
					
						<span class="l">Emails:</span>
						<div class="indent">
								<div class="email">
										<i>
												<span class="type">Home</span>
										</i>: 
									<a class="value" href="mailto:johndoe@hotmail.com">johndoe@hotmail.com</a>
								</div>
								<div class="email">
										<i>
												<span class="type">Work</span>
										</i>: 
									<a class="value" href="mailto:doe.john@acme.com">doe.john@acme.com</a>
								</div>
						</div>
						<br />
					
					
						<span class="l">URLs:</span>
						<div class="indent">
								<a class="url" href="http://www.acme-co.com">http://www.acme-co.com</a><br />
						</div>
				</td>
				
				<td valign="top" style="padding-left:20px">
						<span class="l">Name: </span>
						<div class="n indent">
								<i>Family</i>: <span class="family-name">Doe</span>
								<br />
								
								<i>Given</i>: <span class="given-name">Jonathan</span>
								<br />
							
							
								<i>Honorific prefixes</i>:
									<span class="honorific-prefix">Mr</span>
								<br />
							
						</div>
						<br />
					
						<span class="l">Geo: </span>
						<span class="geo">
							<span class="latitude">37.6</span>,
							<span class="longitude">-95.67</span>
						</span>
						<br />
					
					
						<span class="l">Timezone: </span>
						<span class="tz">
							-0400
						</span>
						<br />
					
						<span class="l">Organization: </span>
						<span class="org">
									<span class="organization-name">Acme Co. Ltd.</span>, 
									<span class="organization-unit">Widget Department</span>
						</span>
						<br />

						<span class="l">Titles: </span>
							<span class="title">Widget Engineer</span>
						<br />
					
				</td>
			</tr>
		</table>
		
		
		<abbr class="prodid" title="ez-vcard 0.11.3"></abbr>
	</div>
	
	<i>hCard specs: <a href="http://microformats.org/wiki/hcard">http://microformats.org/wiki/hcard</a></i><br />
	<i>Generated by <a href="https://github.com/mangstadt/ez-vcard">ez-vcard</a> 0.11.3</i>
		
	</body>
</html>